<template>
    <div class="main_box">
        <h1>这个案例主要是 vue3的 props Typescript写法</h1>

        <div class="main_row">
            具体用法见子组件内代码 ↓↓↓
            <el-button @click="clickSonFn">调用子组件暴露的方法</el-button>
        </div>
        <div class="main-text">defineProps, defineEmits, defineExpose, withDefaults, defineOptions无需导入!!!</div>
        <Son ref="sonRef" :user="user" @update-user="updateUser" @reset-user="resetUser" />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
// 由于 TsDemo3_son.vue 没有默认导出，需使用 import * as
import * as Son from './TsDemo3_son.vue';

// 从子组件导入类型
import type { UserProps } from './TsDemo3_son.vue';

const user = reactive<UserProps>({
    name: '张三',
    age: 18,
    sex: '男' as const, // 使用 as const 将 sex 的值限定为 '男'
    hobby: ['篮球', '足球']
});

const updateUser = (newUser: any) => {
    Object.assign(user, newUser);
};

const resetUser = () => {
    Object.assign(user, {
        name: '张三',
        age: 18,
        sex: '男',
        hobby: ['篮球', '足球']
    });
};

// 调用子组件暴露的方法或属性（没有暴露的用不了）
const sonRef = ref();
const clickSonFn = () => {
    let res = sonRef.value.sonFn('哈哈');
    let num = sonRef.value.sonRef;
    console.log('子组件暴露:', sonRef.value);
};
</script>

<style lang="scss" scoped></style>
